import React from 'react';
import {
	Image,
	StyleSheet,
	Text,
	TouchableOpacity,
	View,
	ListView
} from 'react-native';

// 导入JSON数据
let LocalData = require('./LocalData.json');
// 导入外部组件类
let ScrollImage = require('./ScrollImage');
// 网络图片地址
const imgUrlData = [
	'http://img2.imgtn.bdimg.com/it/u=1865704515,1578516431&fm=200&gp=0.jpg',
	'http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg',
	'http://img3.imgtn.bdimg.com/it/u=3329314408,2941114905&fm=27&gp=0.jpg',
	'http://img5.imgtn.bdimg.com/it/u=3986646060,1869274485&fm=27&gp=0.jpg',
	'http://img3.imgtn.bdimg.com/it/u=3315919876,2908129629&fm=27&gp=0.jpg'
];
// 导入新闻详情页
let Detail = require('./Detail');
/**
 * @FileName: Home
 * @Author: mazaiting
 * @Date: 2018/6/12
 * @Description:
 */
class Home extends React.Component {
	static defaultProps = {
		url_api: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html',
		key_word: 'T1348647853363'
	};
	/**
	 * 导航栏配置
	 * https://reactnavigation.org/docs/en/stack-navigator.html#headerbackimage
	 * 配置项查看
	 */
	static navigationOptions = {
		title: 'Home',
		headerTitleStyle: {
			marginHorizontal: 'auto'
		},
		headerLeft: (
			<TouchableOpacity
				activeOpacity={0.5}
				onPress={() => alert("Login")}
			>
				<Image
					onPress={() => alert("login")}
					source={require('./../../../img/login.png')}
					style={{width: 30, height: 30, marginLeft: 10}}
				/>
			</TouchableOpacity>
		),
		headerRight: (
			<TouchableOpacity
				activeOpacity={0.5}
				onPress={() => alert("Scanner")}
			>
				<Image
					onPress={() => alert("login")}
					source={require('./../../../img/scanner.png')}
					style={{width: 30, height: 30, marginRight: 10}}
				/>
			</TouchableOpacity>
		)
	};
	
	constructor(props) {
		super(props);
		// 初始化
		this.state = {
			// ListView 头部数据源
			headerDataArr: [],
			// cell 数据源
			dataSource: new ListView.DataSource({
				rowHasChanged: (r1, r2) => r1 !== r2
			})
		}
	}
	
	render() {
		return (
			<ListView
				dataSource={this.state.dataSource}
				renderRow={(rowData) => this.renderRow(rowData)}
				renderHeader={() => this.renderHeader()}
			/>
		)
	}
	
	/**
	 * 头部
	 */
	renderHeader() {
		// 判断
		if (this.state.headerDataArr.length === 0) return;
		return (
			<View>
				<ScrollImage imageDataArr={this.state.headerDataArr}/>
			</View>
		)
	}
	
	/**
	 * 单独的Cell
	 */
	renderRow(rowData) {
		return (
			<TouchableOpacity activeOpacity={0.5} onPress={() => {this.pushToNewsDetail(rowData)}}>
				<View style={styles.cellViewStyle}>
					{/*左边*/}
					<Image source={{uri: rowData.imgsrc}} style={styles.imgStyle}/>
					{/*右边*/}
					<View style={styles.rightViewStyle}>
						<Text style={styles.titleStyle}>{rowData.title}</Text>
						<Text style={styles.subTitleStyle}>{rowData.digest}</Text>
						<Text style={styles.flowTitleStyle}>{rowData.replyCount}跟帖</Text>
					</View>
				</View>
			</TouchableOpacity>
		)
	}
	
	/**
	 * 跳转到新闻详情页
	 */
	pushToNewsDetail(rowData) {
		// 最简单
		// this.props.navigation.push('Detail');
		// this.props.navigation.navigate('Detail');
		this.props.navigation.navigate('Detail', {
			title: rowData.title,
			docId: rowData.docid,
			passProps:{rowData}
		})
	}
	
	/**
	 * 请求网络数据
	 */
	componentDidMount() {
		this.loadDataFromNet();
	}
	
	/**
	 * 从网络加载数据
	 */
	loadDataFromNet() {
		fetch(this.props.url_api)
			// 处理返回的数据为JSON数据
			.then((response) => response.json())
			// 网络数据获取
			.then((responseData) => {
				// console.log(responseData);
				this.dealWithData(responseData);
			})
			// 网络异常捕获
			.catch((error) => {
				if(error) {
					// 打断点
					// debugger;
					// 特殊处理
					// this.dealWithData(LocalData)
				}
			})
	}
	
	/**
	 * 处理数据
	 * @param responseData
	 */
	dealWithData(responseData) {
		let jsonData = responseData[this.props.key_word];
		// 定义临时变量
		let headerArr = [], listDataArr = [];
		// 遍历拿到的json数据
		for (let i = 0; i < jsonData.length; i++) {
			// 取出单独的对象
			let data = jsonData[i];
			// 判断,取出广告数据
			if (data.hasAD == 1) {
				headerArr = data.ads;
			} else {
				// 剩余数据
				listDataArr.push(data);
			}
		}
		// 设置图片地址
		for (let i = 0; i < headerArr.length; i++) {
			headerArr[i].url = imgUrlData[i];
		}
		// 更新状态机
		this.setState({
			// ListView 头部数据源
			headerDataArr: headerArr,
			// cell 数据源
			dataSource: this.state.dataSource.cloneWithRows(listDataArr)
		});
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	cellViewStyle: {
		backgroundColor: '#fff',
		flexDirection: 'row',
		padding: 10,
		// 设置下边框
		borderBottomColor: '#E8E8E8',
		borderBottomWidth: 1
	},
	imgStyle: {
		width: 90,
		height: 90
	},
	rightViewStyle: {
		width: 360,
		marginLeft: 8
	},
	titleStyle: {
		fontSize: 16,
		marginBottom: 5,
		color: '#222'
	},
	subTitleStyle: {
		color: 'gray'
	},
	flowTitleStyle: {
		// 绝对定位
		position: 'absolute',
		right: 10,
		bottom: 0,
		// 设置边框
		borderWidth: 1,
		borderColor: 'gray',
		borderRadius: 5,
		padding: 1,
		color: 'gray'
	}
});

/**
 * 导出当前Module
 */
module.exports = Home;